<template>
  <div class="quick-actions">
    <div class="actions-panel">
      <h4>快速操作</h4>
      
      <div class="action-section">
        <h5>数据展示</h5>
        <div class="button-group">
          <button 
            @click="toggleDeviceDisplay" 
            :class="{ active: showDevices }"
            class="action-button"
          >
            <span class="icon">🚜</span>
            农机设备
          </button>
          
          <button 
            @click="toggleParcelDisplay" 
            :class="{ active: showParcels }"
            class="action-button"
          >
            <span class="icon">🏞️</span>
            地块边界
          </button>
        </div>
      </div>
      
      <div class="action-section">
        <h5>视角控制</h5>
        <div class="button-group">
          <button @click="flyToAllDevices" class="action-button">
            <span class="icon">📍</span>
            查看所有设备
          </button>
          
          <button @click="flyToAllParcels" class="action-button">
            <span class="icon">🗺️</span>
            查看所有地块
          </button>
          
          <button @click="resetToChina" class="action-button">
            <span class="icon">🏠</span>
            回到中国
          </button>
        </div>
      </div>
      
      <div class="action-section">
        <h5>系统功能</h5>
        <div class="button-group">
          <button @click="refreshAllData" class="action-button" :disabled="isRefreshing">
            <span class="icon">🔄</span>
            {{ isRefreshing ? '刷新中...' : '刷新数据' }}
          </button>
          
          <button @click="showSystemStats" class="action-button">
            <span class="icon">📊</span>
            系统统计
          </button>
        </div>
      </div>
    </div>
    
    <!-- 系统统计面板 -->
    <div class="stats-panel" v-if="showStats">
      <div class="stats-header">
        <h4>系统统计</h4>
        <button @click="showStats = false" class="close-btn">×</button>
      </div>
      
      <div class="stats-content">
        <div class="stat-item">
          <span class="label">设备总数:</span>
          <span class="value">{{ deviceCount }}</span>
        </div>
        <div class="stat-item">
          <span class="label">在线设备:</span>
          <span class="value">{{ onlineDeviceCount }}</span>
        </div>
        <div class="stat-item">
          <span class="label">地块总数:</span>
          <span class="value">{{ parcelCount }}</span>
        </div>
        <div class="stat-item">
          <span class="label">总作业面积:</span>
          <span class="value">{{ formatArea(totalArea) }}</span>
        </div>
        <div class="stat-item">
          <span class="label">轨迹记录:</span>
          <span class="value">{{ pathCount }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, inject } from 'vue';
import * as Cesium from 'cesium';

// Props
const props = defineProps({
  viewer: {
    type: Object,
    required: true
  }
});

// Emits
const emit = defineEmits(['toggle-devices', 'toggle-parcels', 'refresh-data']);

// Reactive data
const showDevices = ref(true);
const showParcels = ref(true);
const isRefreshing = ref(false);
const showStats = ref(false);

// 统计数据
const deviceCount = ref(0);
const onlineDeviceCount = ref(0);
const parcelCount = ref(0);
const totalArea = ref(0);
const pathCount = ref(0);

// Methods
const toggleDeviceDisplay = () => {
  showDevices.value = !showDevices.value;
  emit('toggle-devices', showDevices.value);
};

const toggleParcelDisplay = () => {
  showParcels.value = !showParcels.value;
  emit('toggle-parcels', showParcels.value);
};

const flyToAllDevices = () => {
  // 获取所有设备的边界
  const entities = props.viewer.entities.values.filter(entity => 
    entity.id && entity.id.toString().startsWith('device_')
  );
  
  if (entities.length > 0) {
    props.viewer.flyTo(entities, {
      duration: 2.0
    });
  }
};

const flyToAllParcels = () => {
  // 获取所有地块的边界
  const entities = props.viewer.entities.values.filter(entity => 
    entity.id && entity.id.toString().startsWith('parcel_')
  );
  
  if (entities.length > 0) {
    props.viewer.flyTo(entities, {
      duration: 2.0
    });
  }
};

const resetToChina = () => {
  props.viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 50000),
    orientation: {
      heading: 0.0,
      pitch: -Cesium.Math.PI_OVER_TWO * 0.5,
      roll: 0.0
    }
  });
};

const refreshAllData = async () => {
  isRefreshing.value = true;
  try {
    emit('refresh-data');
    // 模拟刷新延迟
    await new Promise(resolve => setTimeout(resolve, 1000));
  } finally {
    isRefreshing.value = false;
  }
};

const showSystemStats = () => {
  updateStats();
  showStats.value = true;
};

const updateStats = () => {
  // 从Cesium场景中统计实体数量
  const allEntities = props.viewer.entities.values;
  
  deviceCount.value = allEntities.filter(entity => 
    entity.id && entity.id.toString().startsWith('device_')
  ).length;
  
  parcelCount.value = allEntities.filter(entity => 
    entity.id && entity.id.toString().startsWith('parcel_')
  ).length;
  
  // 这里可以从实际数据源获取更准确的统计
  onlineDeviceCount.value = Math.floor(deviceCount.value * 0.8);
  totalArea.value = parcelCount.value * 90000; // 估算
  pathCount.value = deviceCount.value * 2; // 估算
};

const formatArea = (area) => {
  if (!area) return '0 平方米';
  if (area >= 10000) {
    return `${(area / 10000).toFixed(2)} 公顷`;
  } else {
    return `${area.toFixed(2)} 平方米`;
  }
};

// 对外暴露方法
defineExpose({
  updateStats,
  toggleDeviceDisplay,
  toggleParcelDisplay
});
</script>

<style scoped>
.quick-actions {
  position: fixed;
  bottom: 0px;
  right: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: scale(0.85);
  transform-origin: bottom right;
}

.actions-panel {
  background: rgba(0, 0, 0, 0.85);
  color: white;
  border-radius: 6px;
  padding: 12px;
  min-width: 170px;
  max-width: 210px;
}

.actions-panel h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  text-align: center;
  color: #ffc107;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 8px;
}

.action-section {
  margin-bottom: 15px;
}

.action-section:last-child {
  margin-bottom: 0;
}

.action-section h5 {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.action-button {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.action-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.action-button.active {
  background: rgba(0, 123, 255, 0.3);
  border-color: #007bff;
}

.action-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.action-button .icon {
  font-size: 14px;
}

.stats-panel {
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border-radius: 6px;
  min-width: 210px;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 123, 255, 0.2);
  border-radius: 8px 8px 0 0;
}

.stats-header h4 {
  margin: 0;
  font-size: 14px;
  color: #007bff;
}

.close-btn {
  background: transparent;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.stats-content {
  padding: 15px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
}

.stat-item:last-child {
  margin-bottom: 0;
}

.stat-item .label {
  color: #ccc;
}

.stat-item .value {
  color: #ffc107;
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .quick-actions {
    bottom: -40px;
    right: 5px;
    transform: scale(0.8);
  }
  
  .actions-panel, .stats-panel {
    min-width: 150px;
    max-width: 180px;
  }
  
  .action-button {
    padding: 5px 8px;
    font-size: 10px;
  }
}
</style>